import { reactive, readonly } from 'vue'

// 创建全局状态
const state = reactive({
  user: null,
  theme: 'light',
  loading: false
})

// 定义修改状态的方法
const mutations = {
  setUser(user) {
    state.user = user
  },
  
  setTheme(theme) {
    state.theme = theme
  },
  
  setLoading(loading) {
    state.loading = loading
  }
}

// 定义获取状态的方法
const getters = {
  isLoggedIn: () => !!state.user,
  getUser: () => state.user,
  getTheme: () => state.theme,
  isLoading: () => state.loading
}

// 创建 actions
const actions = {
  login(userInfo) {
    mutations.setLoading(true)
    // 模拟异步登录
    setTimeout(() => {
      mutations.setUser(userInfo)
      mutations.setLoading(false)
    }, 1000)
  },
  
  logout() {
    mutations.setUser(null)
  },
  
  toggleTheme() {
    const newTheme = state.theme === 'light' ? 'dark' : 'light'
    mutations.setTheme(newTheme)
  }
}

// 导出 store
export default {
  state: readonly(state),
  getters,
  actions
}